<template>
  <div class="app-container">
    <el-card shadow="never">
      <div slot="header">
        <span class="ys">基本信息</span>
      </div>
      <el-form :model="baseInfo">
        <el-row>
          <el-col :span="6">
            <el-form-item label="运输任务编号：" size="mini">
              <span>{{ baseInfo.transportTaskId }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="车牌号码：" size="mini">
              <span>{{ baseInfo.licensePlate }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="起始地机构：" size="mini">
              <span>{{ baseInfo.startAgencyName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="目的地机构：" size="mini">
              <span>{{ baseInfo.endAgencyName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="出车时间：" size="mini">
              <span>{{ baseInfo.outStorageTime }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="回车时间：" size="mini">
              <span>{{ baseInfo.intoStorageTime }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="司机：" size="mini">
              <span>{{ baseInfo.driverName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <div slot="header">
        <span class="ys">故障信息</span>
      </div>
      <el-form :model="baseInfo">
        <el-row>
          <el-col :span="8">
            <el-form-item label="车辆故障：" size="mini">
              <span>{{ baseInfo.isFault === true ? '是' : baseInfo.isFault === false ? '否' : '无' }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否可用：" size="mini">
              <span>{{ baseInfo.isAvailable === true ? '可用' : baseInfo.isAvailable === false ? '不可用' : '无' }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="故障类型：" size="mini">
              <span>{{ baseInfo.faultType=== 1 ? '发动机启动困难' : baseInfo.isAvailable === 2 ? '不可用' : '无' }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="故障图片:" size="mini">
              <!-- <span>{{ baseInfo.faultImages }}</span> -->
              <!-- <img :src="URL" alt=""> -->
              <div class="src">
                <div class="photo">
                  <img
                    :src="
                      baseInfo.faultImages === null
                        ? url
                        : baseInfo.faultImages
                    "
                    alt=""
                  >
                  <div class="img-shadow">
                    <i
                      class="el-icon-zoom-in"
                      style=""
                      @click="
                        magnify(
                          baseInfo.faultImages === null
                            ? url
                            : baseInfo.faultImages
                        )
                      "
                    />
                  </div>
                </div>
              </div>
              <el-dialog :visible.sync="dialogVisible" width="600px">
                <img :src="magnifyPic" alt="">
                <span class="el-icon-close" @click="dialogVisible = false" />
              </el-dialog>
            </el-form-item></el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <div slot="header">
        <span class="ys">违章信息</span>
      </div>
      <el-form :model="baseInfo">
        <el-row>
          <el-col :span="8">
            <el-form-item label="车辆违章：" size="mini">
              <span>{{ baseInfo.isBreakRules === true ? '是' : baseInfo.isBreakRules === false ? '否' : 'null' }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="违章类型：" size="mini">
              <span>{{ baseInfo.breakRulesType === 1 ? '闯红灯' : baseInfo.isAvailable === 2 ? '无证驾驶' : '无' }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="罚款金额：" size="mini">
              <span>{{ baseInfo.penaltyAmount }}元</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="扣分：" size="mini">
              <span>{{ baseInfo.deductPoints }}分</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <div slot="header">
        <span class="ys">违章信息</span>
      </div>
      <el-form :model="baseInfo">
        <el-row>
          <el-col :span="12">
            <el-form-item label="车辆事故：" size="mini">
              <span>{{ baseInfo.isAccident === true ? '是' : baseInfo.isAccident === false ? '否' : 'null' }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="事故类型：" size="mini">
              <span>{{ baseInfo.accidentType === 1 ? '直行事故' : baseInfo.accidentType === 2 ? '追尾' : '无' }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="事故图片：" size="mini">
              <!-- <span>{{ baseInfo.accidentImages }}</span> -->
              <div class="src">
                <div class="photo">
                  <img
                    :src="
                      baseInfo.accidentImages === null
                        ? url
                        : baseInfo.accidentImages
                    "
                    alt=""
                  >
                  <div class="img-shadow">
                    <i
                      class="el-icon-zoom-in"
                      style=""
                      @click="
                        magnify(
                          baseInfo.accidentImages === null
                            ? url
                            : baseInfo.accidentImages
                        )
                      "
                    />
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getBackRegister } from '@/api/car'
export default {
  name: 'BackListLook',
  data() {
    return {
      baseInfo: {
        deductPoints: null,
        penaltyAmount: null
      },
      dialogVisible: false,
      magnifyPic: '',
      // 控制图片
      url: 'https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/282b9ee4-9edc-40e9-b365-84dec2cce429.png'
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      const res = await getBackRegister(this.baseInfo, this.$route.query.id)
      console.log(res)
      this.baseInfo = res
      this.baseInfo.deductPoints = null
      this.baseInfo.penaltyAmount = null
    },
    magnify(pic) {
      this.magnifyPic = pic
      this.dialogVisible = true
    }
  }
}

</script>

<style lang="scss" scoped>
.el-card{
    padding-left: 40px;
    margin-bottom: 10px;
    :deep(.el-card__header){
        border-bottom: 0;
    }
}

:deep(.el-form){
    .src{
        .photo{
            width: 212px;
            height: 159px;
            border-radius: 10px;
            overflow: hidden;
            &:hover .img-shadow{
                opacity: 1;
            }
            img{
                width: 100%;
                height: 100%;
            }
            position: relative;
            .img-shadow{
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: rgba($color: #000000, $alpha: .5);
                top: 0;
                left: 0;
                color: #fff;
                font-size: 25px;
                text-align: center;
                line-height: 159px;
                opacity: 0;
            }
        }
    }
    .el-dialog__header{
        display: none;
    }
    .el-dialog__body{
        position: relative;
        padding: 0;
        width: 600px;
        height: 600px;
        img{
            width: 100%;
            height: 100%;
        }
        span{
            position: absolute;
            right: 5%;
            top: 5%;
            cursor: pointer;
        }
    }
}

input {
    line-height: 1.5;
}
.ys{
    font-size:17px;
    font-weight: 700;
}
::v-deep label{
  font-size:14px;
  font-weight: normal;
  color: #000000;
}
</style>
